<template>
	<view class="orderDetail">
		<view class="box">
			<detailItem title="订单商品" :state="state" :list="goods"></detailItem>
		</view>
		<view class="box">
			<detailCollapse title="订单信息" :list="orderList"></detailCollapse>
		</view>

		<detailLog @click="handleClick"></detailLog>
		<u-gap height="80" bgColor="#F9F9F9"></u-gap>
		<detailFoot v-if="btnList.length > 0" :list="btnList" @click="footBtnFn"></detailFoot>
	</view>
</template>

<!-- 收货单列表详情 -->
<script setup>
	import {
		returnOrderDetail,
		returnOrderCancel,
		returnOrderCheck,
	} from "@/api/order";
	import detailCollapse from "@/components/orderDetail/detailCollapse.vue";
	import detailItem from "@/components/orderDetail/detailItem.vue";
	import detailLog from "@/components/orderDetail/detailLog.vue";
	import detailFoot from "@/components/orderDetail/detailFoot.vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		computed
	} from "vue";
	import {
		message
	} from "@/hooks/useToast";
	import {
		useDetailStore
	} from "@/store/detail";
	import {
		BASE_UNIT
	} from "@/common/config";
	const btnList = computed(() => {
		return [{
				name: "修改",
				value: "edit",
				plain: true,
				isShow: () => respOmsReturnorderDTO.value.billState === 0,
			},
			{
				name: "作废",
				value: "cancel",
				plain: true,
				isShow: () => respOmsReturnorderDTO.value.billState === 0,
			},
			{
				name: "审核",
				value: "check",
				isShow: () => respOmsReturnorderDTO.value.billState === 0,
			},
		].filter((btn) => btn.isShow());
	});
	const state = computed(() => {
		return respOmsReturnorderDTO.value.billStateStr;
	});

	const goods = computed(() => {
		try {
			return detail.value.respOmsReturnorderInfoDTOList.map((btn) => {
				return {
					name: btn.goodsName,
					image: btn.goodsImage,
					des: btn.skuName || "默认",
					infoList: [{
							value: `${BASE_UNIT.icon}${btn.returnorderPrice}x${btn.returnorderNum}${btn.unitName}`,
							tag: "return",
						},
						{
							name: "退货金额",
							value: `${BASE_UNIT.icon}${btn.returnorderMoney}`,
						},
						{
							name: "备注：",
							value: btn.remark,
						},
					],
				};
			});
		} catch (e) {
			return [];
		}
	});
	const orderList = computed(() => {
		return [{
				name: "退货单号",
				value: respOmsReturnorderDTO.value.returnorderCode,
				copy: true,
			},
			{
				name: "退货日期",
				value: uni.$u.timeFormat(
					respOmsReturnorderDTO.value.returnorderDate,
					"yyyy-mm-dd"
				),
			},
			{
				name: "退货类型",
				value: respOmsReturnorderDTO.value.returnReasonStr || "-",
			},
			{
				name: "往来单位",
				value: respOmsReturnorderDTO.value.workhouseName || "-",
			},
			{
				name: "备注",
				value: respOmsReturnorderDTO.value.remark,
			},
		];
	});
	const id = ref("");
	const detail = ref({});
	const respOmsReturnorderDTO = computed(() => {
		return detail.value.respOmsReturnorderDTO;
	});
	onLoad((params) => {
		if (params.id) {
			id.value = params.id;
		}
	});
	onShow(() => {
		getDetail();
	});
	const getDetail = async () => {
		const res = await returnOrderDetail({
			id: id.value,
		});
		detail.value = res;
	};
	const detailStore = useDetailStore();
	const handleClick = () => {
		detailStore.setLogList(detail.value.respOmsReturnorderLogDTOList);
		uni.navigateTo({
			url: "/pages/orderList/detailLog",
		});
	};
	// 作废
	const handleCancel = async () => {
		uni.showModal({
			editable: true,
			placeholderText: "请输入作废理由",
			success: async (res) => {
				if (res.confirm) {
					await returnOrderCancel({
						id: id.value,
						remark: res.content,
					});
					message("操作成功");
					getDetail();
				}
			},
		});
	};
	// 审核
	const handleCheck = async () => {
		uni.showModal({
			editable: true,
			placeholderText: "请输入审核意见",
			success: async (res) => {
				if (res.confirm) {
					await returnOrderCheck({
						id: id.value,
						remark: res.content,
					});
					message("操作成功");
					getDetail();
				}
			},
		});
	};
	const footBtnFn = (name) => {
		const fns = {
			edit: () => {
				uni.navigateTo({
					url: "/pages/orderList/return/returnListEdit?id=" + id.value,
				});
			},
			cancel: handleCancel,
			check: handleCheck,
		};
		fns[name]();
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
		padding-top: 13px;
	}

	.box {
		margin-bottom: 10px;
	}
</style>